<template>
	<view class="myPackageContainer">
		<!-- 搜索框 -->
		<view class="search-content">

			<image class="search-img" src="../../../static/会员卡商城加套餐卡/组合 405.png" mode=""></image>
			<input placeholder="请输入订单号,商品号" v-model="searchVal" @input="changeInput" @confirm="changeSearch"
				style="width: auto;line-height: 1em; " placeholder-style="font-size:28rpx;color:#A1A1A1;" />
			<image v-if="searchVal" class="icon_close" src="/static/delect.png" @click="close"></image>
		</view>
		<view class="myPackageCard">

			<view class="orderTop flex-start">
				<view class="order">
					订单号：66335511441211
				</view>
				<view class="orderCopy flex">
					复制
				</view>
			</view>
			<view class="orderContent">
				<view class="orderPageDescribe flex-start">
					<view>
						<image class="img" src="../../../static/会员卡商城加套餐卡/矩形 61.png" mode=""></image>
					</view>
					<view class="flex-column-between-start margin-left_20rpx" style="height: 232rpx ;">
						<view class="font-overflow2">
							满城红洛川红富士苹果2/ 5/10斤装 脆甜多汁满城红洛川红富士苹果2/ 5/10斤装 脆甜多汁满城红洛川红富士苹果2/ 5/10斤装 脆甜多汁
						</view>

						<view style="color: rgb(255, 0, 0);">
							已使用:10 | 未使用:0
						</view>
					</view>

				</view>
				<view class="sumbitOrder flex-end">
					<view class="orderBtnCanel flex">
						删除订单
					</view>

					<view class="orderBtn flex" @click="scanFn">
						<uni-icons class="uniIcon" type="scan" size="18" style="color: rgba(255, 255, 255, 0.63);">
						</uni-icons>
						二维码
					</view>
				</view>
			</view>
		</view>
		<sunui-popup ref="myPackagePopup">
			<template v-slot:content>

				<view class="flex-column ">
					<view style="text-align: center;">
						扫描下方二维码，进行核销！
					</view>
					<!-- <image class="qrcode" :src="followThePublicAccount"></image> -->
					<image class="qrcode" src="../../../static/会员卡商城加套餐卡/矩形 171.png" mode=""></image>

					<!-- <button size="mini" @click="paste(followThePublicAccount)" type="primary"
       				plain="true">复制链接</button> -->
					

				</view>

			</template>
		</sunui-popup>
	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			return {
				searchVal: ''
			}
		},
		onLoad() {

		},
		methods: {

			scanFn() {
				this.$refs.myPackagePopup.show({
					style: 'background-color:#fff;width:600rpx;border-radius:10rpx;padding:50rpx;',
					bottomClose: true,
					shadeClose: true,
					topclose: true
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	page {
		background: #f6f6f6;
	}

	.myPackagePopup {
		.qrcode {
			margin-top: 10rpx;
		}
	}

	.myPackageContainer {
		padding: 30rpx;

		.search-content {
			justify-content: center;
			display: flex;
			align-items: center;
			// width: 446rpx;
			height: 88rpx;
			margin-bottom: 40rpx;
			background: #fff;
			border-radius: 84rpx;

			.search-img {
				width: 30rpx;
				height: 30rpx;
				margin-right: 20rpx;
				margin-left: 40rpx;
			}

			.icon_close {
				padding: 0rpx 15rpx;
				width: 36rpx;
				height: 36rpx;
				margin-right: 30rpx;
			}
		}
	}

	.myPackageCard {
		border-radius: 20rpx;
		padding: 20rpx;
		background: rgb(255, 255, 255);

		.orderTop {
			padding-bottom: 20rpx;
			border-bottom: 2rpx solid rgba(121, 121, 121, 0.2);

			.order {
				color: rgb(102, 102, 102);

				font-size: 28rpx;
				font-weight: 400;
			}

			.orderCopy {
				margin-left: 10rpx;
				width: 68rpx;
				height: 36rpx;
				background: rgb(238, 238, 238);
				color: rgb(153, 153, 153);

				font-size: 24rpx;
			}
		}



		.orderContent {
			.orderPageDescribe {
				// padding-right: 90rpx;

				.img {
					width: 230.02rpx;
					height: 232rpx;
				}

			}

			.sumbitOrder {


				background: rgb(255, 255, 255);

				.orderBtn {
					border-radius: 148rpx;
					color: #ffffff;
					background: rgb(255, 57, 38);
					width: 160rpx;
					height: 64rpx;
				}

				.orderBtnCanel {
					margin-right: 20rpx;
					border-radius: 148rpx;
					color: rgb(51, 51, 51);
					border: 1px solid rgb(225, 225, 225);
					background: rgb(255, 255, 255);
					width: 160rpx;
					height: 64rpx;
				}
			}
		}
	}
</style>